<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页制作</title>
    <style>
        div div  {
            /* border: 1px solid black; */
            background-color:whitesmoke;
            height: 20px;
            /* margin-left: -521px; */
            border-radius: 15px;
            /* position: absolute; */
            width: 1356px;

        } 
        div div input {
            margin: auto;
            margin-top: 69px;
            margin-left: 255px;
        }
        .img2 {
            margin-top: -34px;
            margin-left: 20px;
        }
        div div a {
            color:black;
            margin-left: -8px;
            padding-left: 50px;
            margin-top: 71px;
            width: 10px;
            text-wrap: nowrap;
            
        }
        div a {
            /* margin: auto; */
            margin-left: 42px;
            /* margin-top: 1px; */
        }
        div img {
            margin-top: 10px;
        }
        div input {
            margin-left: 40px;
        }

        .service1 {
            display: flex;
            width: 1200px;
            height: 200px;
            margin: 50px auto;
            margin-top: 100px;
            background-color: whitesmoke;
            /* border: 1px solid ; */
        }
        .service1 ul {
            display: flex;

        }
        .service1 li {
            display: flex;
            width: 200px;
            height: 50px;
            padding-left: 20px;
        }
        .service1 li p {
            font-size: 20px;
            color: black;
            font-weight: 500;
            line-height: 70px;
            margin-left: 10px;
        }
        .service1 li h4 {
            height: 70px;
            width: 80px;
            background: url(./QQ图片20240628082614.jpg) -143px 495px;
        }

        .service1 li:nth-child(2) h4 {
            background-position: -407px 495px;
        }
        .service1 li:nth-child(3) h4 {
            background-position: -669px 495px;
        }
        .service1 li:nth-child(4) h4 {
            background-position: -407px 495px;
        }
        .service2 {
            /* display: flex; */
            width: 1160px;
            height: 300px;
            margin: 50px auto;
            margin-top: -50px;
            background-color: whitesmoke;
            /* border: 1px solid ; */
        }
        .service2 li {
            display: flex;
            width: 900px;
            height: 50px;
            padding-left: 20px;
            
        }

        .service2 li a {
            height: 70px;
            width: 280px;
            display: block;
            margin-left: 10px;
            /* text-wrap: nowrap; */
            

        }
    </style>
</head>
<body>
    <div>
        <div class="a1">
            <a  target="_blank" style="color: greenyellow;" href="https://developer.mozilla.org/zh-CN/" >请先登录|</a>
            <a>免费注册|</a>
            <a>我的订单|</a>
            <a>会员中心|</a>
            <a>帮助中心|</a>
            <a>在线客服|</a>
            <a>手机版|</a>
        </div>
        <div style="position: relative;display:flex;justify-content: space-around;"> 
            <img src="./屏幕截图 2024-06-28 143049.png" width="250px" height="130px" >
            <a>首页</a>
            <a>生鲜</a>
            <a>美食</a>
            <a>餐厨</a>
            <a>电器</a>
            <a>居家</a>
            <a>保护</a>
            <a>洗护</a>
            <a>服装</a>
            <input type="text" placeholder="搜一搜">
            <img  class="img2" src="./屏幕截图 2024-06-28 185643.png" style="width: 73px;position: absolute;top: 65px;left: 1166px;">
        </div>
    </div>
    <div class="service1">
        <ul>
            <li>
                <h4></h4>
                <p>价格亲民</p>
            </li>
            <li>
                <h4></h4>
                <p>物流快捷</p>
            </li>
            <li>
                <h4></h4>
                <p>品质新鲜</p>
            </li>
            <li>
                <h4></h4>
                <p>售后无忧</p>
            </li>
        </ul>
    </div>
    <div>
        <ul class="service2">
            <li>
                <a>购物指南</a>
                <a>配送方式</a>
                <a>关于我们</a>
                <a>售后服务</a>
                <a>服务热线</a>
            </li>
            <li>
                <a>购物流程</a>
                <a>配送运费</a>
                <a>平台规则</a>
                <a>售后政策</a>
                <a>在线客服</a>
            </li>
            <li>
                <a>支付方式</a>
                <a>配送范围</a>
                <a>联系我们</a>
                <a>退款说明</a>
                <a>客服电话400-0000-000</a>
            </li>
            <li>
                <a>售后规则</a>
                <a>配送时间</a>
                <a>问题反馈</a>
                <a>取消订单</a>
                <a>工作时间 周一至周日 8:00-18:00</a>
            </li>
        </ul>
    </div>
        
</body>
</html>